<template>
  <view class="flex-row flex-center">
    <view class="tui-loadmore-none flex-row justify-center">
      <view class="flex-row justify-center relative margin-tb-20" :class="[isDot?'tui-nomore-dot':'tui-nomore']">
        <view class="line" />
        <text class="block text-24 color-t3" :style="{backgroundColor}" :class="[isDot?'tui-dot-text':'tui-nomore-text']">{{ isDot?dotText:text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import colors from '@/common/colors'
export default {
  name: 'TuiNomore',
  props: {
    // 当前页面背景颜色
    backgroundColor: {
      type: String,
      default: colors.colorBackground
    },
    // 是否以圆点代替 "没有更多了"
    isDot: {
      type: Boolean,
      default: false
    },
    // isDot为false时生效
    text: {
      type: String,
      default: '没有更多了'
    }
  },
  data() {
    return {
      dotText: '●'
    }
  }
}
</script>

<style scoped lang="scss">
	.tui-loadmore-none {
		width: 375rpx;
		font-size: 24rpx;
	}

	.tui-nomore {
		flex: 1;
		position: relative;
	}

	.line {
		position: absolute;
		border-top: 1px solid $font-color-t3;
		top: 18rpx;
		left: 0;
    right:0;
    z-index:2;
	}

	.tui-nomore-text {
		color: $font-color-t3;
		font-size: 24rpx;
		text-align: center;
		padding: 0 18rpx;
		height: 36rpx;
		line-height: 36rpx;
		position: relative;
		z-index: 5;
	}

	.tui-nomore-dot {
		position: relative;
		text-align: center;
		margin-top: 10rpx;
		padding-bottom: 6rpx;
	}

	.tui-dot-text {
		position: relative;
		color: #e5e5e5;
		font-size: 10px;
		text-align: center;
		width: 50rpx;
		height: 36rpx;
		line-height: 36rpx;
		transform: scale(0.8);
		transform-origin: center center;
		z-index: 1;
	}
</style>
